<template>
  <div class="tab-container">
    <el-segmented v-model="currentTab" :options="tabList" block>
      <template #default="{ item }">
        <div class="flex">
          <div>{{ item.label }}</div>
        </div>
      </template>
    </el-segmented>
  </div>
</template>

<script setup>
import { defineModel } from 'vue'
const currentTab = defineModel('currentTab')

const tabList = [
  {
    label: '正确率',
    value: 'right-rate'
  },
  {
    label: '掌握度',
    value: 'mastery-level'
  }
]
</script>
<style lang="less" scoped>
.tab-container {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  :deep(.el-segmented) {
    padding: 2px;
    border-radius: 5px;
    border: 1px solid #cdced1;
    width: 256px;
    height: 43px;
    background-color: #fff;
    font-size: 16px;

    .is-selected {
      font-weight: 700;
    }

    .el-segmented__item-selected {
      border-radius: 5px;
    }

    .el-segmented__item:not(.is-disabled):not(.is-selected):hover {
      background: unset;
    }

    .flex {
      justify-content: center;
      .icon {
        display: flex;
        align-items: center;
        margin-right: 10px;
        width: 16px;
        height: 16px;
      }
    }
  }
}
</style>
